<template>
  <div class="user-import-container">
    <div class="header">
      <el-page-header @back="goBack" content="批量导入用户">
      </el-page-header>
    </div>
    
    <el-card class="import-card" shadow="hover">
      <div class="import-instructions">
        <h3>导入说明</h3>
        <p>请按照以下格式准备CSV文件：</p>
        <el-table :data="sampleData" style="width: 100%" size="small" border>
          <el-table-column prop="username" label="用户名" width="120"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
          <el-table-column prop="fullName" label="姓名" width="120"></el-table-column>
          <el-table-column prop="password" label="密码"></el-table-column>
        </el-table>
        <p class="note">注意：密码列可以为空，系统会为这些用户生成随机密码并发送到邮箱。</p>
      </div>
      
      <div class="import-form">
        <el-upload
          class="upload-demo"
          drag
          action="/api/users/import"
          :headers="uploadHeaders"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :before-upload="beforeUpload"
          accept=".csv"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传csv文件，且不超过10MB</div>
        </el-upload>
      </div>
      
      <div class="import-progress" v-if="importing">
        <el-progress :percentage="importProgress" :status="importStatus"></el-progress>
        <p>{{ importMessage }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  name: 'UserImport',
  data() {
    return {
      importing: false,
      importProgress: 0,
      importStatus: null,
      importMessage: '',
      sampleData: [
        {
          username: 'user1',
          email: 'user1@example.com',
          fullName: '用户一',
          password: 'password123'
        },
        {
          username: 'user2',
          email: 'user2@example.com',
          fullName: '用户二',
          password: ''
        }
      ]
    }
  },
  computed: {
    uploadHeaders() {
      return {
        'Authorization': getToken()
      }
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    beforeUpload(file) {
      const isCSV = file.type === 'text/csv' || file.name.endsWith('.csv')
      const isLt10M = file.size / 1024 / 1024 < 10
      
      if (!isCSV) {
        this.$message.error('只能上传CSV文件!')
      }
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过10MB!')
      }
      
      return isCSV && isLt10M
    },
    handleUploadSuccess(response, file, fileList) {
      this.importing = true
      this.importProgress = 100
      this.importStatus = 'success'
      this.importMessage = '用户导入成功!'
      this.$message.success('用户导入成功')
      
      // 3秒后返回用户管理页面
      setTimeout(() => {
        this.$router.push('/users')
      }, 3000)
    },
    handleUploadError(error, file, fileList) {
      this.importing = false
      this.importProgress = 100
      this.importStatus = 'exception'
      this.importMessage = '用户导入失败: ' + error.message
      this.$message.error('用户导入失败: ' + error.message)
    }
  }
}
</script>

<style scoped>
.user-import-container {
  padding: 20px;
}

.header {
  margin-bottom: 30px;
}

.import-card {
  border-radius: 10px;
  overflow: hidden;
}

.import-instructions {
  margin-bottom: 30px;
}

.import-instructions h3 {
  margin: 0 0 15px 0;
  color: #303133;
}

.import-instructions p {
  margin: 10px 0;
  color: #606266;
}

.note {
  font-size: 14px;
  color: #E6A23C !important;
  font-style: italic;
}

.import-form {
  margin-bottom: 30px;
}

.import-progress {
  text-align: center;
}

.import-progress p {
  margin: 15px 0 0 0;
  color: #606266;
}
</style>